<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
		<!-- <template #top>	 -->
			<view class="head" :style="'background-image: url('+baseUrl+'/static/wximages/000123.png);'">
				<TbarNav title=" " :isbg="1" :stickys="true"></TbarNav>
				<view class="bg">
					<view class="info">
						<image class="tx" :src="userData.avatar" mode="aspectFill"></image>
						<view class="title">
							<text>{{userData.nickname}}</text>
							<image v-if="userData.level" :src="baseUrl + '/static/wximages/icon-08.png'" mode="widthFix"></image>
						</view>
						<view class="ps">
							<text>{{userData.signature}}</text>
						</view>
					</view>
					
					<view class="mod">
						<view class="left">
							<view class="li">
								<text>{{userData.browseCount||0}}</text>
								<text>热度</text>
							</view>
							<view class="li">
								<text>{{userData.followCount||0}}</text>
								<text>粉丝</text>
							</view>
						</view>
						
						<view class="right">
							<button @click="onFollow">{{userData.isfollow ? '已关注' : '未关注'}}</button>
						</view>
					</view>
				</view>
				
			</view>
		<!-- </template> -->
		
		<view class="list">
			<view class="li" 
				   @click="onJmup('/pages/reserve/activity/details?id='+item.id)" 
				   v-for="(item,index) in dataList" 
				   :key="item.id"
				   >
				
				<view class="desc">
					<image class="le-img" :src="item.image" mode="aspectFill"></image>
					<view class="desc-info">
						<view class="desc-title">
							<text>{{item.title}}</text>
						</view>
						
						<view class="desc-span">
							<view class="li">{{item.ctitle}}</view>
						</view>
						
						<view class="desc-txt">
							<!-- <image :src="baseUrl + '/static/wximages/icon-06.png'" mode="widthFix"></image> -->
							<text>{{item.date}}</text>
						</view>
						
						<view class="desc-txt">
							<!-- <image :src="baseUrl + '/static/wximages/icon-07.png'" mode="widthFix"></image> -->
							<view class="addres">
								<text>{{item.address}}</text>
								<!-- <text>距我0km</text> -->
							</view>
							
						</view>
						
						
						<view class="browsing-history">
							<view class="browsing-history-tx">
								<image v-for="(x, idx) in item.record"
								:src="x.user_avatar" 
								v-if="idx < 3"
								mode="aspectFill"></image>
							</view>
							<text :style="'margin-left: '+ (15 * ( item.record.length < 3 ? item.record.length + 1 : 4)) +'rpx;'">{{item.record.length}}人参加</text>
							
							
							<view class="juli">
								<image :src="baseUrl + '/static/wximages/icon-20.png'" mode="widthFix"></image>
								<text>{{item.distance}}km</text>
							</view>
						</view>
						
						
						
						
					</view>
				</view>
				
			</view>
		</view>
	
	
		</z-paging>
	</view>
</template>

<script>
	import TbarNav from '@/components/TbarNav'
	import { getCircleList,getUserCircleInfo,userCircleFollow } from '@/api/reserve.js';
	export default {
		components: {
			TbarNav
		},
		data() {
			return {
				dataList: [],
				userData: {},
				uid: '',
				locationObj: {},
				baseUrl: this.$baseUrl
			}
		},
		watch:{
			dataList(newVal, oldVal) {
				if (Object.keys(this.locationObj).length > 0) {
					this.updateDistance()
				} else {
					this.getLocation()
				}
		    }
		},
		onLoad(ops) {
			if (ops.uid) {
				this.uid = ops.uid;
			}
		},
		onShow() {
			
			this.getUserCircleInfo();
		},
		methods: {
			onJmup(url) {
				uni.navigateTo({
					url: url
				})
			},
			onFollow() {
				userCircleFollow({
					cid: this.uid
				}).then(res => {
					this.getUserCircleInfo()
				})
			},
			getUserCircleInfo() {
				getUserCircleInfo({
					uid: this.uid
				}).then(res => {
					this.userData = res.data;
				})
			},
			updateDistance() {
				this.$nextTick(() => {

				this.dataList.forEach((item,index) => {
					item.distance = this.$util.distance(
					this.locationObj.lat,
					this.locationObj.lng, 
					item.latLng.lat, 
					item.latLng.lng);
					
					this.$set(this.dataList[index],'distance',item.distance);
					// console.log('this.dataList',this.dataList[index].distance);
				})
				// console.log('this.dataList',this.dataList);
				})
			},
			getLocation() {
			    uni.getLocation({
			        type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
			        success: res => {
			            console.log('当前位置信息：', res);
						this.locationObj = {
							lat: res.latitude,
							lng: res.longitude
						}
						
						this.updateDistance()
			        },
			        fail: err => {
			            console.error('获取位置信息失败', err);
			        }
			    });
			},
			queryList(pageNo, pageSize) {
				
				// 此处请求仅为演示，请替换为自己项目中的请求
				const params = {
					page: pageNo,
					pageSize: pageSize,
					uid: this.uid
				}
				
				getCircleList(params).then(res => {
					this.$refs.paging.complete(res.data.data);
				})
			}
		}
	}
</script>
<style>
	page {
		background: #003153;
	}
</style>
<style scoped lang="scss">
	.head {
		position: relative;
		width: 750rpx;
		height: 630rpx;
		background-repeat: no-repeat;
		background-size: cover;
		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			background: linear-gradient( 360deg, #000000 13%, rgba(0,0,0,0.03) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
		
		.info {
			padding: 50rpx;
			.tx {
				width: 121rpx;
				height: 121rpx;
				border-radius: 29rpx 29rpx 29rpx 29rpx;
				border: 2rpx solid #FFFFFF;
			}
			.title {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 47rpx;
				color: #FFFFFF;
				margin-top: 15rpx;
				image {
					width: 38rpx;
					height: 35rpx;
					margin-left: 10rpx;
				}
			}
			.ps {
				font-size: 33rpx;
				color: #F7F7F7;
				margin-top: 5rpx;
			}
		}
		.mod {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 50rpx;
			.left {
				display: flex;
				align-items: center;
				.li {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 40rpx;
					text {
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						&:nth-child(1) {
							font-size: 36rpx;
							margin-bottom: 11rpx;
						}
					}
				}
			}
			.right {
				button {
					width: 131rpx;
					height: 53rpx;
					background: #464A4D;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 53rpx ;
				}
			}
		}
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	.list {
		padding: 30rpx;
		position: relative;
		z-index: 1;
		border-radius: 50rpx 50rpx 0 0;
		background-color: #003153;
		.li {
			width: 696rpx;
			
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 30rpx;
			
			.desc {
				display: flex;
				align-items: flex-start;
				// padding: 15rpx;
				.le-img {
					flex: 0 0 198rpx;
					width: 198rpx;
					height: 260rpx;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
				}
				.desc-info {
					width: 100%;
					color: #333;
					padding-left: 18rpx;
					.desc-title {
						height: 85rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						-webkit-line-clamp: 2;
					}
					.desc-span {
						margin-top: 10rpx;
						margin-bottom: 8rpx;
						.li {
							width: 54rpx;
							height: 32rpx;
							line-height: 32rpx;
							text-align: center;
							background: #FF6915;
							padding: 0;
							margin: 0;
							border-radius: 5rpx 5rpx 5rpx 5rpx;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
						}
					}
					.desc-txt {			
						display: flex;
						align-items: center;
						font-size: 22rpx;
						color: #999;
						margin-bottom: 5rpx;
						image {
							flex: 0 0 23rpx;
							width: 23rpx;
							height: 23rpx;
							margin-right: 10rpx;
						}
						.addres {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text{
								&:nth-child(1) {
									width: 220rpx;
									overflow: hidden;
									white-space: nowrap; 
									text-overflow: ellipsis;
								}
							}
						}
					}
					.browsing-history {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						font-weight: 500;
						font-size: 26rpx;
						color: #999;
						margin-top: 15rpx;
						position: relative;
						text {
							
							margin-right: -15rpx;
							
						}
						.juli {
							position: absolute;
							right: 10rpx;
							display: flex;
							align-items: center;
							font-weight: 400;
							font-size: 20rpx;
							color: #999999;
							image {
								flex: 0 0 auto;
								width: 22rpx;
								height: 22rpx;
								margin-right: 5rpx;
							}
						}
						.browsing-history-tx {
							display: flex;
							align-items: center;
							margin-left: -15rpx;
							image {
								width: 32rpx;
								height: 32rpx;
								position: relative;
								border-radius: 50%;
								&:nth-child(1) {
									right: -20rpx;
									z-index: 9;
								}
								&:nth-child(2) {
									right: -10rpx;
									z-index: 8;
								}
								&:nth-child(3) {
									z-index: 1;
								}
							}
						}
					}
				}
			}
		}
	}
</style>